<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>点餐</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- 核心 tabs 文件 -->
    <link rel="stylesheet" href="css/tabs.css" type="text/css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/Dialog.js"></script>
    <script src="js/tabs.js"></script>
    <script src="shoppad-jsp/food.js"></script>
</head>
<body>
    <div class="index">
        <div class="index-top">
            外婆家1号
        </div>
   
        <div class="index-center">
            <div class="row">
                <div class="col-sm-2">
                    <div class="index-nav">
                        <div id="spancur" style="display: none;"></div>
                        <p id="lastuser" class="lastuser">员工编号：10001</p>
                        <input id="loginexit" type="button"  value="切换用户" >
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="index.html" class="active">首页</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">设置打印机</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">修改密码</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home nav-pad">
                        <a href="#"><span>1</span>切换PAD</a>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="index-nav nav-home">
                        <a href="#">退出登录</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="diet-info clearfix">
            <div class="diet-info-left">
                <div class="choice-people ">
                    <div class="cp-title clearfix">
                        <div class="left">
                        桌号:桌4
                        </div>
                        <div class="right">
                            人数：<b id="cpr"><i>20人</i></b><span id="edit">修改</span>
                        </div>
                    </div>
                    <ul class="cp-num dn clearfix" id="cpnum">
                        <li>1人</li>
                        <li>2人</li>
                        <li>3人</li>
                        <li>4人</li>
                        <li>5人</li>
                        <li>6人</li>
                        <li>7人</li>
                        <li>8人</li>
                        <li>9人</li>
                        <li>10人</li>
                        <li>11人</li>
                        <li>12人</li>
                        <li>13人</li>
                        <li>14人</li>
                        <li>15人</li>
                        <li>16人</li>
                        <li>17人</li>
                        <li>18人</li>
                        <li>19人</li>
                        <li>20人</li>
                    </ul>
                </div>
                
                <div class="ddieta">
                    <ul class="ddieta-top clearfix">
                        <li class="dca">菜名</li>
                        <li class="dcb">价格(元)</li>
                        <li class="dcc">数量</li>
                        <li class="dcc">总价(元)</li>
                    </ul>

                    <!-- 普通菜有分类做法 -->
                    <ul class="ddieta-center clearfix">
                        <li class="dca cai-select">红烧海参<p>(红烧 大份)</p></li>
                        <li class="dcb"><span class="dishprice">9.6</span>/<span class="dishunit">份</span></li>
                        <li class="dcc">
                            <div class="btn_wrap btnp counter">
                                <button class="list_minus plusone counter_minus fl" ><strong></strong></button>
                                <i class="nocounter fl dishnum">4</i>
                                <button class="list_add counter_plus addone" ><strong></strong></button>
                                <em class="fixBig  fake"></em>
                            </div>
                        </li>
                        <li class="dcc">38.40</li>
                    </ul>
                    
                    <!-- 普通菜没有分类做法 -->
                    <ul class="ddieta-center clearfix">
                        <li class="dca">红烧海参1</li>
                        <li class="dcb"><span class="dishprice">9.6</span>/<span class="dishunit">份</span></li>
                        <li class="dcc">
                            <div class="btn_wrap btnp counter">
                                <button class="list_minus plusone counter_minus fl" ><strong></strong></button>
                                <i class="nocounter fl dishnum">4</i>
                                <button class="list_add counter_plus addone" ><strong></strong></button>
                                <em class="fixBig  fake"></em>
                            </div>
                        </li>
                        <li class="dcc">38.40</li>
                    </ul>

                    <!-- 套餐系列 -->
                    <ul id="accordion" class="accordion">
                        <!-- 套餐1 -->
                        <li>
                            <div class="link">
                                <ul class="ddieta-center clearfix">
                                    <li class="dca">套餐1</li>
                                    <li class="dcb"><span class="dishprice">9.6</span>/<span class="dishunit">份</span></li>
                                    <li class="dcc">
                                        <div class="btn_wrap btnp counter">
                                            <button class="list_minus plusone counter_minus fl" ><strong></strong></button>
                                            <i class="nocounter fl dishnum">4</i>
                                            <button class="list_add counter_plus addone" ><strong></strong></button>
                                            <em class="fixBig  fake"></em>
                                        </div>
                                    </li>
                                    <li class="dcc">38.40</li>
                                </ul>
                            </div>
                            <ul class="submenu">     
                                <li class="clearfix">         
                                    <div class="left">香瓜1</div>         
                                    <div class="right">2个</div>     
                                </li>
                                <li class="clearfix">         
                                    <div class="left">香瓜2</div>         
                                    <div class="right">2个</div>     
                                </li>     
                            </ul>
                        </li>   
                        
                        <!-- 套餐2 -->
                        <li>
                            <div class="link">
                                <ul class="ddieta-center clearfix">
                                    <li class="dca">套餐2</li>
                                    <li class="dcb"><span class="dishprice">9.6</span>/<span class="dishunit">份</span></li>
                                    <li class="dcc">
                                        <div class="btn_wrap btnp counter">
                                            <button class="list_minus plusone counter_minus fl" ><strong></strong></button>
                                            <i class="nocounter fl dishnum">4</i>
                                            <button class="list_add counter_plus addone" ><strong></strong></button>
                                            <em class="fixBig  fake"></em>
                                        </div>
                                    </li>
                                    <li class="dcc">38.40</li>
                                </ul>
                            </div>
                            <ul class="submenu cart">     
                                <li class="clearfix">         
                                    <div class="left">西瓜1</div>         
                                    <div class="right">2个</div>     
                                </li>     
                                <li class="clearfix">         
                                    <div class="left">西瓜2</div>         
                                    <div class="right">2个</div>     
                                </li>
                            </ul>
                        </li> 
                    </ul> 
                </div>
             
              
                <div id="myOrder">
                    <div class="f-fix">
                        <div class="order_title">                          
                            <div class="clearfix foot_orderList">
                                <div class="left">
                                    <b>数量：</b><span style="font-size:16px;"class="num" id="num">0</span>
                                </div>
                                <div class="right">
                                    <b>总计：</b> ¥ <span class="price" id="price_txt">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="oder_submit">                      
                            <button class="dw2">
                                <a>点菜</a>
                            </button>
    
                            <button class="dw2">
                                <a>取消</a>
                            </button>
                            <button id="clearOder" class="">清空</button>
                        </div>
                    </div>
                   
                </div>      
            </div>

            <div class="diet-info-center">
                <div class="diet-info-centera">
                    <div class="" id="diet2" >
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">选择菜的做法</h4>
                            </div>
                            <div class="modal-body">
                                <div class="zuocai clearfix">
                                    <div class="left ">红烧</div>
                                    <div class="right ">
                                        <input type="radio" name="radio4" checked="checked"><label for="radio1"></label>
                                    </div>
                                </div>
                                <div class="zuocai clearfix">
                                    <div class="left">清蒸</div>
                                    <div class="right">
                                        <input type="radio" name="radio4"><label for="radio1"></label>
                                    </div>
                                </div>
                                <div class="zuocai clearfix">
                                    <div class="left ">红烧</div>
                                    <div class="right ">
                                        <input type="radio" name="radio4" checked="checked"><label for="radio1"></label>
                                    </div>
                                </div>
                                <div class="zuocai clearfix">
                                    <div class="left">清蒸</div>
                                    <div class="right">
                                        <input type="radio" name="radio4"><label for="radio1"></label>
                                    </div>
                                </div>
                                <div class="zuocai clearfix">
                                    <div class="left ">红烧</div>
                                    <div class="right ">
                                        <input type="radio" name="radio4" checked="checked"><label for="radio1"></label>
                                    </div>
                                </div>
                                <div class="zuocai clearfix">
                                    <div class="left">清蒸</div>
                                    <div class="right">
                                        <input type="radio" name="radio4"><label for="radio1"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <input type="submit" data-dismiss="modal" value="取消">
                                <input type="submit" id="queren" value="确认">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="diet-info-right diet-jiansuo">
                <div class="tabs">
                    <div class="tabs-header">
                        <div class="border"></div>
                        <ul class="clearfix">
                           <li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">菜品检索</a></li>
                           <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">拼音检索</a></li>
                           <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">自定义菜</a></li>
                        </ul>
                    </div>
                    <div class="tabs-content">
                        <div tab-id="1" class="tab active clearfix" id="tabs1">
                            <div class="left" id="J_menuList">
                                <ul>
                                    <li class="active">
                                        <a>所有分类</a>
                                    </li>

                                    <li class="">
                                       <a>热菜</a>
                                    </li>
                                        
                                    <li class="">
                                        <a href="">海鲜</a>
                                    </li>
                                        
                                    <li class="">
                                        <a >凉菜</a>
                                    </li>

                                    <li class="">
                                        <a>套餐</a>
                                    </li>   
                                </ul>
                            </div>
                            <div class="right">
                                <div id="divlistalldish" class="row diet-all clearfix">
                                    <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                         

                                    <!-- 套餐菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name" data-target="#1" data-toggle="modal">
                                            <div class="ellipsis">海鲜套餐</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>

                                     <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                         

                                    <!-- 套餐菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name" data-target="#1" data-toggle="modal">
                                            <div class="ellipsis">海鲜套餐</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                     <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 普通菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name">
                                            <div class="ellipsis" >红烧海参</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>
                                    
                         

                                    <!-- 套餐菜 -->
                                    <div class="diet-list" >
                                        <div class="diet-list-name" data-target="#1" data-toggle="modal">
                                            <div class="ellipsis">海鲜套餐</div> 
                                            <div class="diet-list-price">¥200.0 /份</div>
                                        </div>
                                    </div>

                                    <!-- 套餐菜单列表明细 -->
                                    <div class="modal fade diet-tanchukuang" id="1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                        <div class="modal-dialog modal-sm">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title" id="myModalLabel">海鲜套餐菜单明细</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="diet-tanchukuang-list clearfix">
                                                        
                                                        <div class="dleft">麻辣醉虾</div>
                                                        <div class="dleft diet-num">
                                                            <button class="list_minus plusone counter_minus fl" onclick="comboPlus(this)" style="display: inline-block;" data_id="1" ontouchstart=""><strong></strong></button>
                                                            <i class="nocounter fl dishnum" style="display: inline-block;">0</i>
                                                            <button class="list_add counter_plus addone" onclick="comboAddnum(this)" data_id="1" ontouchstart=""><strong></strong></button>
                                                        </div>
                                                        <div class="dright">2盘</div>
                                                    </div>
                                        
                                                    <div class="diet-tanchukuang-miaoshu">
                                                       麻辣醉虾麻辣醉虾麻辣醉虾麻辣醉虾麻辣醉虾麻辣醉虾麻辣醉虾
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <input type="submit" data-dismiss="modal" value="取消">
                                                    <input type="submit" value="确认">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>           
                            </div>
                        </div>
                        <div tab-id="2" class="tab" id="tabs2">
                            <!-- <form action="" method="post"> -->
                                <input type="text"  name="diet-mingzi" id="diet-mingzi" placeholder="输入菜名/菜品编号查询">
                                <!-- <input type="submit" value="查询" id="diet-select">
                            </form> -->
                            <div id="divlistalldish" class="row diet-all clearfix">
                                <!-- 普通菜 -->
                                <div class="diet-list" >
                                    <div class="diet-list-name" data-target="#sdiet1" data-toggle="modal">
                                        <div class="ellipsis" >红烧海参</div> 
                                        <div class="diet-list-price">¥200.0 /份</div>
                                    </div>
                                </div>
                                
                            </div>  
                        </div>
                        <div tab-id="3" class="tab " id="tabs3">
                            <div class="zdy-chioce">
                                <form action="">
                                    <div class="zdy-chioce-a clearfix">
                                        <div class="left">商品名称</div>
                                        <div class="right"><input type="text" placeholder="输入菜名"></div>
                                    </div>
                                    <div class="clearfix zdy-chioce-b">
                                        <p>所属分类</p>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" checked="checked"><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                甜点
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                海鲜
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                热菜
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                凉菜
                                            </div>
                                        </div>
                                         <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio"><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                酒水
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                自助
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                自助1
                                            </div>
                                        </div>
                                        <div class="zuocai clearfix">
                                            <div class="left ">
                                                <input type="radio" name="radio" ><label for="radio1"></label>
                                            </div>
                                            <div class="right ">
                                                自助2
                                            </div>
                                        </div>
                                    </div>
                                    <div class="zdy-chioce-c clearfix">
                                        <div class="left">购买数量</div>
                                        <div class="right">
                                            <div class="btn_wrap btnp counter">
                                                <button class="list_minus plusone counter_minus fl"><strong></strong></button>
                                                <i class="nocounter fl dishnum">4</i>
                                                <button class="list_add counter_plus addone"><strong></strong></button>
                                                <em class="fixBig  fake"></em>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="zdy-chioce-a clearfix">
                                        <div class="left">数量单位</div>
                                        <div class="right">
                                            <input type="text" placeholder="输入单位">
                                        </div>
                                    </div>
                                    <div class="zdy-chioce-a clearfix">
                                        <div class="left">单价</div>
                                        <div class="right">
                                            <input type="text" placeholder="输入单价">
                                        </div>
                                    </div>
                                    <div class="zdy-chioce-d">
                                        <p>备注</p>
                                        <textarea name="" id=""></textarea>
                                    </div>
                                    <div class="modal-footer zdy-chioce-e">
                                        <input type="submit" data-dismiss="modal" value="取消">
                                        <input type="submit" id="queren" value="确认">
                                    </div>
                                </form>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
   

    <script>
        $(document).ready(function(){                   
            $("#cpnum li").click(function () {
                $("#cpr i").addClass("dn");
                $(this).addClass("show").siblings().removeClass("show");
                {
                    var copyThisC = $(this).clone();
                    if ($("#selectC").length > 0) {
                        $("#selectC").html($(this).text());
                    } else {
                        $("#cpr").append(copyThisC.attr("id", "selectC"));
                    }
                }
            });
            $("#edit").click(function () {
                $("#cpnum").removeClass("dn");
            });
        });
   </script>

   <script>
        $(document).ready(function () {
            var activePos = $('.tabs-header .active').position();
            function changePos() {
                activePos = $('.tabs-header .active').position();
                $('.border').stop().css({
                    left: activePos.left,
                    width: $('.tabs-header .active').width()
                });
            }
            changePos();
            var tabHeight = $('.tab.active').height();
            function animateTabHeight() {
                tabHeight = $('.tab.active').height();
        
            }
            animateTabHeight();
            function changeTab() {
                var getTabId = $('.tabs-header .active a').attr('tab-id');
                $('.tab').stop().fadeOut(300, function () {
                    $(this).removeClass('active');
                }).hide();
                $('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
                    $(this).addClass('active');
                    animateTabHeight();
                });
            }
            $('.tabs-header a').on('click', function (e) {
                e.preventDefault();
                var tabId = $(this).attr('tab-id');
                $('.tabs-header a').stop().parent().removeClass('active');
                $(this).stop().parent().addClass('active');
                changePos();
                tabCurrentItem = tabItems.filter('.active');
                $('.tab').stop().fadeOut(300, function () {
                    $(this).removeClass('active');
                }).hide();
                $('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
                    $(this).addClass('active');
                    animateTabHeight();
                });
            });
            var tabItems = $('.tabs-header ul li');
            var tabCurrentItem = tabItems.filter('.active');

            $('[ripple]').on('click', function (e) {
                var rippleDiv = $('<div class="ripple" />'), rippleOffset = $(this).offset(), rippleY = e.pageY - rippleOffset.top, rippleX = e.pageX - rippleOffset.left, ripple = $('.ripple');
                rippleDiv.css({
                    top: rippleY - ripple.height() / 2,
                    left: rippleX - ripple.width() / 2,
                    background: $(this).attr('ripple-color')
                }).appendTo($(this));
                window.setTimeout(function () {
                    rippleDiv.remove();
                }, 1500);
            });
        });
        $(function() {
            var Accordion = function(el, multiple) {
                this.el = el || {};
                this.multiple = multiple || false;

                // Variables privadas
                var links = this.el.find('.link');
                // Evento
                links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
            }

            Accordion.prototype.dropdown = function(e) {
                var $el = e.data.el;
                    $this = $(this),
                    $next = $this.next();

                $next.slideToggle();
                $this.parent().toggleClass('open');

                if (!e.data.multiple) {
                    $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
                };
            }   

            var accordion = new Accordion($('#accordion'), false);
        });
    </script> 
</body>
</html>

